<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        table {border: 1px solid #000; border-collapse: collapse; text-align: center;}
        table tr td{width:100px; height: 40px; border: 1px solid #000;}
    </style>
</head>

<body>
   

    活动名称：<input type="text" id="txt"><br/><br/>
    活动区域：<input type="text" id="qy"><br/><br/>
    活动时间：<input type="date" id="rq" onchange="changefun()"><br/><br/>
    活动性质： <label><input type="checkbox" value="美食/餐厅线上活动" class="kl" onclick="clickfun2()">美食/餐厅线上活动</label>
              <label><input type="checkbox" value="地推活动" class="kl" onclick="clickfun2()">地推活动</label><br/><br/>
 &emsp; &emsp; &emsp; &emsp;<label><input type="checkbox" value="线下主题活动" class="kl" onclick="clickfun2()">线下主题活动</label>
              <label><input type="checkbox" value="单纯品牌曝光" class="kl" onclick="clickfun2()">单纯品牌曝光</label><br/><br/>
    特殊资源:  <label id="zz"><input type="radio" name="ah" value=" 线上品牌商赞助" onclick="clickfun3()"> 线上品牌商赞助</label>
              <label id="mf"><input type="radio" name="ah" value="线下场地免费" onclick="clickfun3()"> 线下场地免费</label><br/><br/>
             
    活动形式：<textarea id="content" cols="30" rows="10"></textarea><br/><br/>
    &emsp; &emsp; &emsp; &emsp;  <button id="btn">提交</button>
       <!--用来清空表单数据-->
       <input type="reset" name="reset" value="重置" id="rese" onclick="funcz()"/>
    <div id="box">
        <table>
            <tr>
                <td>活动名称</td>
                <td>活动区域</td>
                <td>活动时间</td>
                <td> 活动性质</td>
                <td>特殊资源</td>
                <td>活动形式</td>
                <td> 操作</td>
            </tr>
           
        </table>
        <table id="trs">

        </table>
    </div><br/>
    <script> 


         
       
 
   function  clickfun2(){
        var inpu = document.getElementsByClassName("kl")
        var duo=""
        for (var j = 0; j < inpu.length; j++) {
            if (inpu[j].checked == true) {
                 duo +=  inpu[j].value
                console.log(duo)             
            } 
      }  return duo
      }
      
         function clickfun3(){
        var inpu = document.getElementsByName("ah")
        for (var j = 0; j < inpu.length; j++) {
            if (inpu[j].checked == true) {
                var dan =  inpu[j].value
                console.log(dan)
              
            } 
      }  return dan
        
         
      }
         window.onload=function (){
            document.getElementById("btn").addEventListener('click',function (){
                var title = document.getElementById("txt").value,
                    content = document.getElementById("qy").value,
                    sj = changefun(),
                    xz = clickfun2(),
                    zy = clickfun3(),
                    xs = document.getElementById("content").value;
                var obj = {  //储存输入框里的值
                    title : title,
                    con : content,
                    time : sj,
                    xz : xz,
                    zy :zy,
                    xs :xs
                  
                }
                setkzt(obj) //应用中
                getlist() //刷新页面
            })
            getlist()//刷新页面
        }
        //获取创建到本地储存中
        function setkzt(obj){ 
            if(!localStorage.getItem('lylist')){
            localStorage.setItem('lylist', JSON.stringify([obj])) 
            }else{
            var data =JSON.parse(localStorage.getItem('lylist')) 
            data.push(obj) 
            localStorage.setItem('lylist', JSON.stringify(data)) 
            }
        }
        function getlist(){ //然后渲染到页面
            if(!localStorage.getItem('lylist')){
                return
            }
                var ym =JSON.parse(localStorage.getItem('lylist'))
                var str = "" 
                for (let i in ym) { 
                    str += `
                        <tr>
                        <td>${ym[i].title}</td>
                        <td>${ym[i].con}</td>
                        <td>${ym[i].time}</td>
                        <td>${ym[i].xz}</td>
                        <td>${ym[i].zy}</td>
                        <td>${ym[i].xs}</td>
                        <td><button onclick=del(${i})>删除</button></td>
                   </tr>
                    `
                }
               document.getElementById('trs').innerHTML = str
            

        }

        function del(index){
            var data = JSON.parse(localStorage.getItem('lylist'))
            data.splice(index,1)
            localStorage.setItem('lylist',JSON.stringify(data))
            getlist()
        }

      
        function changefun(){
             var g  = document.getElementById("rq").value
            return g
        }

     //重置
     function funcz(){
          var input_value = document.getElementsByTagName('input');
            for (var k in input_value){
                if (input_value[k].value !='') {
                    input_value[k ].value = ''
                    }  
            }
            for (var f in input_value){
              console.log(input_value[f].checked)
            if(input_value[f].checked){
                input_value[f].checked==false
           }
         }
     }
    

    </script>
</body>

</html>